<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/exam' }"> <i class="el-icon-lx-cascades"></i> 考试列表 </el-breadcrumb-item>
                <el-breadcrumb-item>[{{ customData.title }}] 答题详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="paper-public-info">
            <div class="base-info">
                <div class="cover">
                    <img :src="customData.avatar" />
                </div>
                <div class="info"><div class="title text-ellipsis">{{ customData.nickname }}</div></div>
            </div>
            <div class="result-info">
                <div class="score">
                    <div class="title">考试成绩</div>
                    <div class="value">{{ customData.score }}</div>
                </div>
                <div class="total-time">
                    <div class="title">答题时间</div>
                    <div class="value"><span>{{ 10 > Math.floor(customData.total_time / 3600)  ? '0' + Math.floor(customData.total_time / 3600) : Math.floor(customData.total_time / 3600) }}</span>:<span>{{ 10 > Math.floor((customData.total_time / 60 % 60))  ? '0' + Math.floor((customData.total_time / 60 % 60)) : Math.floor((customData.total_time / 60 % 60)) }}</span>:<span>{{ 10 > Math.floor((customData.total_time % 60))  ? '0' + Math.floor((customData.total_time % 60)) : Math.floor((customData.total_time % 60)) }}</span></div>
                </div>
            </div>
        </div>
        <div class="paper-section">
            <div class="data-block">
                <div class="item total">总分：{{ customData.total }} <span>分</span></div>
                <div class="item pass">及格：{{ customData.pass }} <span>分</span></div>
                <div class="item exam-time">作答时间：{{ customData.exam_time }} <span>分钟</span></div>
            </div>
            <div class="data-block margin-bottom">
                <div class="item type-1-count">
                    <span>（单选题）</span> <span>共 {{ customData.type_1_count }} 道</span>
                    <span style="color: red">共 {{ customData.total_setting.type_1 }} 分</span>
                    <span>每题 {{ customData.type_1_count == 0 ? 0 : customData.total_setting.type_1 / customData.type_1_count }} 分</span>
                </div>
                <div class="item type-1-count">
                    <span>（多选题）</span> <span>共 {{ customData.type_2_count }} 道</span>
                    <span style="color: red">共 {{ customData.total_setting.type_2 }} 分</span>
                    <span>每题 {{ customData.type_2_count == 0 ? 0 : customData.total_setting.type_2 / customData.type_2_count }} 分</span>
                </div>
                <div class="item type-1-count">
                    <span>（判断题）</span> <span>共 {{ customData.type_3_count }} 道</span>
                    <span style="color: red">共 {{ customData.total_setting.type_3 }} 分</span>
                    <span>每题 {{ customData.type_3_count == 0 ? 0 : customData.total_setting.type_3 / customData.type_3_count }} 分</span>
                </div>
				<div class="item type-1-count">
				    <span>（填空题）</span> <span>共 {{ customData.type_4_count }} 道</span>
				    <span style="color: red">共 {{ customData.total_setting.type_4 }} 分</span>
				    <span>每题 {{ customData.type_4_count == 0 ? 0 : customData.total_setting.type_4 / customData.type_4_count }} 分</span>
				</div>
				<br>
				<div class="item total">共计：{{ customData.type_1_count + customData.type_2_count + customData.type_3_count + customData.type_4_count }} <span>道</span></div>
                
            </div>
        </div>
        <div class="container">
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
				
                <el-table-column prop="question" label="题目名称"></el-table-column>
				
                <el-table-column label="选项内容">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type !== 3">
                            <div v-for="(item, index) in scope.row.options" :key="index">
                                <span>{{ item.option }}：</span>
                                <span>{{ item.description }}</span>
                            </div>
                        </div>
                        <span v-else>对错</span>
                    </template>
                </el-table-column>
				
                <el-table-column prop="type" label="题型">
                    <template slot-scope="scope">
                        <!-- {{ scope.row.type == 1 ? '单选题' : scope.row.type == 2 ? '多选题' : '判断题' }} -->
						{{ scope.row.type == 1 ? '单选题' : scope.row.type == 2 ? '多选题' : scope.row.type == 3 ? '判断题' : scope.row.type == 4 ? '填空题' : scope.row.type == 5 ? '问答题' : '材料题'}}
                    </template>
                </el-table-column>
				
                <el-table-column prop="answer" label="答案">
                    <template slot-scope="scope">
                        <div class="answer">
                            <div style="color: #00ce74" v-if="scope.row.type != 4">
                                <span>正确答案：</span
                                ><span>{{
                                    scope.row.true_answer == 0 ? '错误' : scope.row.true_answer == 1 ? '正确' : scope.row.true_answer
                                }}</span>
                            </div>
							
							<div style="color: #00ce74" v-if="scope.row.type == 4">
							    <span>正确答案：</span>
								<span v-for="(item, index) in JSON.parse(scope.row.true_answer)" :key="index">
									{{ item.description }}
								</span>
							</div>
							
                            <div :style="scope.row.answer != scope.row.true_answer ? `color: red` : `color: #00ce74`">
                                <span>用户答案：</span
                                ><span>{{ scope.row.answer == 0 ? '错误' : scope.row.answer == 1 ? '正确' : scope.row.answer }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
				
                <el-table-column>
                    <template slot-scope="scope">
                        <div style="font-size: 30px">
                            <span v-if="scope.row.answer != scope.row.true_answer" style="color: red"><i class="el-icon-close"></i></span>
                            <span v-else style="color: #00ce74"><i class="el-icon-check"></i></span>
                        </div>
                    </template>
                </el-table-column>
				
            </el-table>
			
			
            <!-- <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div> -->
        </div>
    </div>
</template>

<script>
import merge from 'webpack-merge';
import { examdetailData } from '../../api/index';
export default {
    // name: 'columnManage',
    data() {
        return {
            query: {
                id: this.$route.query.id,
                // page: 1,
                // rows: 4,
            },
            tableData: [],
            customData: [],
            // pageTotal: 0
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            examdetailData(this.query).then((res) => {
                console.log(res);
                this.customData = res.data.data;
                this.tableData = res.data.data.answer;
                // this.pageTotal = res.data.count;
            });
        },

        // 分页
        // handlePageChange(val) {
        //     this.$set(this.query, 'page', val);
        //     this.getData();
        // }
    }
};
</script>

<style scoped>
.paper-public-info .base-info {
    width: 180px;
    margin: 10px auto;
    text-align: center;
}
.paper-public-info .base-info .cover img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.paper-public-info .base-info .info .title {
    padding: 10px 0 0;
    color: #666;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.paper-public-info .result-info {
    text-align: center;
    padding: 10px;
    margin-bottom: 30px;
}
.paper-public-info .result-info .score,
.paper-public-info .result-info .total-time {
    display: inline-block;
    width: 260px;
    color: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
}
.paper-public-info .result-info .score {
    background: #ff7444;
}
.paper-public-info .result-info .total-time {
    background: #47d1af;
}
.paper-public-info .result-info .score .value,
.paper-public-info .result-info .total-time .value {
    font-size: 24px;
}
.paper-section {
    margin: 20px 0;
}
.paper-section .data-block {
    padding: 5px 0;
}
.paper-section .data-block .item:first-child {
    margin-left: 0;
}
.paper-section .data-block .item {
    display: inline-block;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    background-color: #fff;
    border-radius: 5px;
    margin: 0 5px;
    padding: 5px 20px;
}
.table {
    width: 100%;
    font-size: 14px;
}
</style>




